<template>
    <div class="header-container">
         <div class="header-left" @click="handleToggle">
            <el-icon size="20" class="icon"><Fold/></el-icon>
         </div>
         <div class="header-right">
             <el-dropdown>
                <div class="el-dropdown-link header-dropdown">
                   <el-avatar class="user-avatar"
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    />
                    <p class="user-name">
                        <span>admin</span>
                        <el-icon class="el-icon--right">
                            <ArrowDown />
                        </el-icon>
                    </p>
                </div>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>Action 1</el-dropdown-item>
                    <el-dropdown-item>Action 2</el-dropdown-item>
                    <el-dropdown-item>Action 3</el-dropdown-item>
                    <el-dropdown-item disabled>Action 4</el-dropdown-item>
                    <el-dropdown-item divided>Action 5</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
         </div>
    </div>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue'

import {useStore} from 'vuex'
const store = useStore()
const handleToggle = () => {
    console.log(store.state.menu.isCollapsed,'1111111')
    store.commit('collapseMenu')
    console.log('toggleCollapse')
}
</script>
<style lang="scss" scoped>
 .header-container{
         display: flex;
         justify-content:space-between;
         align-items: center;
         background-color: #f1f1f1;
         height:100%;
         padding-right: 20px;
         .header-left{
                 height: 100%;
                 padding:0 20px;
                .icon{
                    height:100%;
                    cursor: pointer;
                    color: #606266;
                }
              &:hover{
                    background-color: #fff;
                }  
         }
         .header-right{
            .header-dropdown{
               cursor: pointer;
               display:flex;
               .user-avatar{
                    margin-right: 20px;
                }
                .user-name{
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #606266;
                    
                }
               }
            }
           
            }
        

</style>
